<template>
  <div class="detail">
    <button @click="handleClick">想看</button>
    <van-row v-for="(item, row) in seats" :key="row">
      <van-col v-for="(seat, col) in item" :key="col + 's'">
        <span v-if="seat===0" @click="selectSeat(row, col)">0</span>
        <span v-else-if="seat===1" style="color: blue;" @click="selectSeat(row, col)">1</span>
        <span v-else style="color: red;">1</span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { wishMovie, getSchedule } from '@/api/movie'
export default {
  data () {
    return {
      seats: [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      ]
    }
  },
  methods: {
    async handleClick () {
      // 点击按钮执行想看的逻辑
      const res = wishMovie({
        userId: 25,
        movieId: 4
      })
      console.log(res)
    },
    selectSeat (row, col) {
      if (this.seats[row][col] === 0) {
        this.seats[row][col] = 1
      } else {
        this.seats[row][col] = 0
      }
      this.seats = JSON.parse(JSON.stringify(this.seats))
    }
  },
  async created () {
    const res = await getSchedule()
    const seatinfo = res.data.data.seat_info
    const arr = JSON.parse(seatinfo)
    arr.forEach((postion) => {
      const res = (postion + '').split('')
      const row = res[0] // 行
      const col = res[1] // 列
      this.seats[row][col] = 2
    })
    this.seats = JSON.parse(JSON.stringify(this.seats))
  }
}
</script>

<style>
.van-col span {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #ccc;
}
</style>
